/*
# Rocket viewer is (c) BCNMedTech, UNIVERSITAT POMPEU FABRA
#
# Rocket viewer is free software: you can redistribute it and/or modify
# it under the terms of the GNU Affero General Public License as
# published by the Free Software Foundation, either version 3 of the
# License, or (at your option) any later version.
#
# Rocket viewer is distributed in the hope that it will be useful,
# but WITHOUT ANY WARRANTY; without even the implied warranty of
# MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
# GNU Affero General Public License for more details.
#
# You should have received a copy of the GNU Affero General Public License
# along with this program.  If not, see <http://www.gnu.org/licenses/>.
#
# Authors:
# Carlos Yagüe Méndez
# María del Pilar García
# Daniele Pezzatini
# Contributors: 
# Sergio Sánchez Martínez
*/

@import './rkt_modal_todo_list_item/rkt_modal_todo_list_item.scss';
$purpleMain: #443363;//rgb(110, 83, 158);
$purpleHover:#a58cd8;

/* Safari 4.0 - 8.0 */
@-webkit-keyframes popmodal {
    from {opacity:0;}
    to {opacity: 1;}
}

/* Standard syntax */
@keyframes popmodal {
    from {opacity: 0;}
    to {opacity: 1;}
}

/* Safari 4.0 - 8.0 */
@-webkit-keyframes unpopmodal {
    from {opacity:1;}
    to {opacity: 0;}
}

/* Standard syntax */
@keyframes unpopmodal {
    from {opacity: 1;}
    to {opacity: 0;}
}

#rkt-modal-todo-list-open {
    -webkit-animation-name: popmodal; /* Safari 4.0 - 8.0 */
    -webkit-animation-duration: 0.5s; /* Safari 4.0 - 8.0 */
    animation-name: popmodal;
    animation-duration: 0.5s;
}

#rkt-modal-todo-list-closed {
    -webkit-animation-name: unpopmodal; /* Safari 4.0 - 8.0 */
    -webkit-animation-duration: 0.5s; /* Safari 4.0 - 8.0 */
    animation-name: unpopmodal;
    animation-duration: 0.5s;
    opacity:0;
}

#disabled-button {
    pointer-events: none; /* Disables the button completely. Better than just cursor: default; */
    opacity:0.75;
}

#enabled-button {
    &:focus, &:hover {
        background: #6f579a;//#004876;
        color: #fff;
    }
}

.rkt-modal-todo-list {
    width: 100%;
    height: 100%;
    position:fixed;
    z-index: 1000;
    overflow: hidden;
    background-color: rgba(29, 29, 29, 0.897);//rgba(0, 0, 0, 0.897);
    color: white;

    .rkt-modal-todo-list-close-button {
        padding:20px;

        .deleteIconButton {
            color:white;
            position: fixed;
            right: 0px;
            padding-right:10px;
            font-size:xx-large; 

            &:hover{
                color:$purpleHover;
            }
        }
    }

    .rkt-modal-todo-list-title {
        margin-left:30px;
        margin-right:30px;
        margin-top:10px;
        margin-bottom:10px;
    
        h2{
            color:rgba(255, 255, 255, 0.89);
        }
    }
    
    .rkt-modal-todo-list-input-area {
        margin-left:30px;
        margin-right:30px;
        margin-top:10px;
        margin-bottom:10px;

        form {
            input{
                background-color: transparent;
                color: white;
                font-size: 25px;
                height:50px;
                /*&:focus{
                    border: 1px solid $purpleHover;
                }*/
            }
        }

        .rkt-modal-todo-list-submit-button {
            padding: 12px;
            right: 0px;
            bottom: 0px;
            //font-size: .9rem;
            height: fit-content;
            display: inline-block;
            background: $purpleMain;//#6f579a;//#00558b;//#333
            margin: 0px;
            overflow: hidden;
            color: #ffffff;
        }

    }

    .rkt-modal-todo-list-items {
        h3{
            color:rgba(255, 255, 255, 0.89);
        }
    }

    .rkt-modal-todo-list-load-button {
        padding-top: 12px;
        padding-bottom: 12px;
        padding-left: 20px;
        padding-right: 20px;
        //font-size: .9rem;
        bottom: 0px;
        background: $purpleMain;//#6f579a;//#00558b;//#333
        margin: 0px;
        overflow: hidden;
        color: white;

    }
}

